<template>
  <div class="formBox">
    <!-- 卡片视图区域 -->
    <!-- <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
    </el-breadcrumb>-->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>系统设置</el-breadcrumb-item>
      <el-breadcrumb-item>角色列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row :gutter="20"></el-row>
    <el-card>
      <el-col :span="4">
        <el-button type="primary" @click="goAdd">添加</el-button>
      </el-col>
      <!-- table表格区域 -->
      <el-table
        :data="tableData"
        label-width="auto"
        fit
        size="medium"
        empty-text="sss"
      >
        <el-table-column type="index"></el-table-column>
        <el-table-column prop="id" label="用户ID："></el-table-column>
        <el-table-column prop="name" label="姓名："></el-table-column>
        <el-table-column prop="userName" label="账号："></el-table-column>
        <el-table-column
          prop="emailAddress"
          label="用户邮箱："
        ></el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.isActive"
              @change="userStateChanged(scope.row)"
              v-if="scope.row.id != 2"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="houseName" label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-edit"
              @click="getFormDataId(scope.row.id)"
              >查看</el-button
            >
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              v-if="scope.row.id != 2"
              @click="goDelete(scope.row.id)"
              >删除</el-button
            >
            <el-button
              size="mini"
              type="warning"
              v-if="scope.row.id != 2"
              @click="goModifyUserData(scope.row.id)"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        background
      ></el-pagination>
    </el-card>
    <!-- 编辑弹出框 -->
    <el-dialog title="提示" :visible.sync="modifyUserData" width="30%">
      <el-form label-width="100px" class="demo-ruleForm">
        <el-form-item label="用户权限：">
          <el-select
            v-model="modifyChoiceSearchData"
            multiple
            placeholder="请选择医疗废物类别"
          >
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="modifyUserData = false">取 消</el-button>
        <el-button type="primary" @click="modifyFormData">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 编辑弹出框 -->
    <!-- 查看弹出框 -->
    <el-dialog title="提示" :visible.sync="modifyCateDialogVisible" width="30%">
      <el-form
        label-width="100px"
        class="demo-ruleForm"
        :model="detailedFormData"
      >
        <el-form-item label="用户ID：">
          <el-input v-model="detailedFormData.id" disabled></el-input>
        </el-form-item>
        <el-form-item label="姓名：">
          <el-input v-model="detailedFormData.name" disabled></el-input>
        </el-form-item>
        <el-form-item label="邮箱：">
          <el-input v-model="detailedFormData.emailAddress" disabled></el-input>
        </el-form-item>
        <!-- 这个数据还没有 -->
        <el-form-item label="用户权限：">
          <el-input
            v-model="detailedFormData.departmentIds"
            disabled
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="modifyCateDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="modifyCateDialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <!--/ 查看弹出框 -->
    <!-- 弹出框 -->
    <el-dialog
      title="提示"
      :visible.sync="addCateDialogVisible"
      width="30%"
      @close="setRoleDialogClosed"
    >
      <el-form label-width="100px" class="demo-ruleForm" :model="addForm">
        <el-form-item label="账号：">
          <el-input v-model="addForm.userName"></el-input>
        </el-form-item>

        <el-form-item label="姓名：">
          <el-input v-model="addForm.name"></el-input>
        </el-form-item>
        <el-form-item label="密码：">
          <el-input v-model="addForm.password"></el-input>
        </el-form-item>
        <el-form-item label="邮箱：">
          <el-input v-model="addForm.emailAddress"></el-input>
        </el-form-item>
        <el-form-item label="用户权限：">
          <el-select
            v-model="choiceSearchData"
            multiple
            placeholder="请选择医疗废物类别"
          >
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addCateDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addFormData">确 定</el-button>
      </span>
    </el-dialog>
    <!--/ 弹出框 -->
  </div>
</template>

<script>
import {
  getRoleData,
  getRoleDataOne,
  addUserData,
  getDepartmentData,
  getChoiceData,
  modifyState,
  modifyUserManagement,
} from "../network/api.js";
import axios from "axios";
import dayjs from "../utils/dayjs";
export default {
  name: "sss",
  components: {},
  props: {},
  data() {
    //这里存数据
    return {
      // 编辑按钮里的科室权限数据
      modifyChoiceSearchData: [],
      // 编辑
      modifyUserData: false,
      // 科室权限
      options2: [],
      // 废物状态
      options1: [],
      // 多选框数据
      choiceSearchData: [],
      // 添加的用户数据
      addForm: {
        name: "",
        userName: "",
        password: "",
        emailAddress: "",
      },
      detailedFormData: {},
      // 添加表单的验证规则对象

      // 编辑弹框阀
      modifyCateDialogVisible: false,
      // diolog框开启关闭阀
      addCateDialogVisible: false,

      // 查询参数对象
      // 查询参数对象
      queryInfo: {
        query: "",
        pagenum: 1,
        pagesize: 10,
        keywords: "",
      },
      // 数据列表
      tableData: [],
      // 总数据条数
      total: 0,
      // 用户id通过编辑获取的
      userId: "",
    };
  },
  //计算属性
  computed: {},
  //监控data中数据变化
  watch: {},
  //方法
  methods: {
    // 编辑弹窗确定按钮
    modifyFormData() {
      if (this.modifyChoiceSearchData.length == 0) {
        return this.$message("请选择科室权限");
      }
      this.modifyUserData = false;
      console.log(this.modifyChoiceSearchData);

      axios
        .put(
          "http://39.104.74.183:21028/api/services/app/User/UpdateProxy?id=" +
            this.userId,
          this.modifyChoiceSearchData
        )
        .then((res) => {
          // console.log(res)
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 编辑按钮
    goModifyUserData(id) {
      console.log(id);
      this.userId = id;
      this.modifyUserData = true;
    },
    // 获取数据
    async getFormData() {
      await getRoleData({
        MaxResultCount: this.queryInfo.pagesize,
        SkipCount: (this.queryInfo.pagenum - 1) * this.queryInfo.pagesize,
      })
        .then((res) => {
          // console.log(res)
          // console.log(res.result.items, 1233)
          this.total = res.result.totalCount;
          this.tableData = res.result.items;
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 监听 pagesize 改变的事件
    handleSizeChange(newSize) {
      // console.log(newSize)
      this.queryInfo.pagesize = newSize;
      this.getSearchFormData();
      // this.getSearchFormData(0, newSize)
    },

    // 监听 页码值 改变的事件
    handleCurrentChange(newPage) {
      this.queryInfo.pagenum = newPage;
      this.getSearchFormData();
    },
    // 点击添加按钮

    // 监听分配角色对话框的关闭事件
    setRoleDialogClosed() {
      this.addForm.name = "";
      this.addForm.userName = "";
      this.addForm.password = "";
      this.choiceSearchData = [];
      this.addForm.emailAddress = "";
    },
    // 点击弹窗的确定安妮

    // 获取查看数据
    async getFormDataId(id) {
      console.log(id);
      this.modifyCateDialogVisible = true;
      await getRoleDataOne({
        id: id,
      })
        .then((res) => {
          // console.log(res.result)
          this.detailedFormData = res.result;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 点击添加按钮
    goAdd() {
      this.addCateDialogVisible = true;
    },
    // 点击添加弹窗的确定按钮
    addFormData() {
      this.addCateDialogVisible = false;
      let data = {
        userName: this.addForm.userName,
        password: this.addForm.password,
        name: this.addForm.name,
        surname: this.addForm.userName,
        emailAddress: this.addForm.emailAddress,
        departmentIds: this.choiceSearchData,
        isActive: true,
        roleNames: ["Admin"],
      };
      axios
        .post("http://39.104.74.183:21028/api/services/app/User/Create", data)
        .then((res) => {
          // console.log(res)
          this.getFormData();
        })
        .catch((err) => {
          console.log(err);
          this.$message.error("用户添加失败！");
        });
    },

    userStateChanged(data) {
      // console.log(data)
      modifyState({
        id: data.id,
        active: data.isActive,
      })
        .then((res) => {
          // console.log(res)
          this.$message("修改成功");
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 获取科室管理数据
    async getDocData() {
      await getChoiceData({})
        .then((res) => {
          // console.log(res.result)
          this.options1 = res.result;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 删除按钮
    goDelete(id) {
      // console.log(id)

      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios
            .delete(
              "http://39.104.74.183:21028/api/services/app/User/Delete?Id=" + id
            )
            .then((res) => {
              // console.log(res, 124)
              // console.log(res.status)
              this.getFormData();
            })
            .catch((err) => {
              console.log(err);
            });
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
      // console.log(id)
    },
  },
  //声明周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getFormData();
    this.getDocData();

    // getRoleDataOne({
    //   id: this.$store.state.userId,
    // })
    //   .then((res) => {
    //     console.log(res)
    //   })

    //   .catch((err) => {
    //     console.log(err)
    //   })
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>

<style lang="less" scoped>
// .btn {
//   width: 50px;
//   height: 50px;
// }
.iptwidth {
  width: 50rem;
  margin-left: 25rem;
}
.el-breadcrumb {
  display: inline-block;
  margin-left: 0.625rem;
  height: 3.125rem;
  // font-size: 1.625rem;
  line-height: 3.125rem;
  // background-color: green;
}
</style>>


